<!--
 * @Description: 
 * @Date: 2024-05-15 15:53:43
 * @LastEditTime: 2024-09-09 15:19:51
-->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '检察官信息',
    navigationBarTextStyle: 'white', //标题栏字体颜色
    navigationBarBackgroundColor: '#0063AF', //标题栏背景色(纯色)
  },
}
</route>
<template>
  <view class="visit w-screen h-screen px-40rpx py-30rpx box-border bg-#FFFFFF">
    <view class="border-rd-10rpx px-20rpx py-30rpx cardShadow">
      <view class="flex gap-20rpx">
        <view class="w-150rpx h-150rpx border-rd-50% overflow-hidden">
          <img class="w-100% h-100%" :src="caseData.avatar ? baseUrl + caseData.avatar : userImg" />
        </view>
        <view class="flex flex-col justify-center gap-30rpx">
          <text class="font-bold">{{ caseData.nickname }}</text>
          <text class="text-26rpx color-#848484">{{ caseData.deptName }}</text>
        </view>
      </view>
      <view class="text-28rpx color-#848484 my-20rpx">
        {{ caseData.introduction }}
      </view>
      <view class="flex gap-20rpx">
        <view
          class="px-30rpx py-10rpx border-rd-20rpx"
          v-for="(item, index) in menuLists"
          :key="index"
          :style="{
            background: index % 2 == 0 ? '#FFF4EB' : '#E9FFEB',
            color: index % 2 == 0 ? '#EE640D' : '#0AB21D',
          }"
        >
          {{ item }}
        </view>
      </view>
    </view>
    <view class="my-30rpx font-bold">预约排班</view>
    <view
      class="border-rd-10rpx px-30rpx py-10rpx cardShadow flex flex-col"
      v-if="dateList.length > 0"
    >
      <view
        class="flex justify-between items-center py-20rpx yuYue-item"
        v-for="(item, index) in dateList"
        :key="index"
      >
        <view class="flex gap-10px">
          <text class="text-26rpx color-#000">{{ item.requestTime }}</text>
          <!-- <text class="text-26rpx color-#848484">{{ item.week }}</text>
          <text class="ml-10rpx text-26rpx color-#006EFF">{{ item.day }}</text> -->
        </view>
        <view>
          <wd-button size="small" :disabled="item.status != 0" @click="handleSub(item.id)">
            {{ item.status == 0 ? '预约' : '已约满' }}
          </wd-button>
        </view>
      </view>
    </view>
    <view class="my-30rpx font-bold">更多信息</view>
    <wd-tabs v-model="tab" lineWidth="60" @change="handleChange">
      <block v-for="(item, index) in infoList" :key="index">
        <wd-tab :title="`${item}`"></wd-tab>
      </block>
    </wd-tabs>
    <view class="py-20rpx">
      <view v-if="active == 0">{{ caseData.attainment }}</view>
      <view v-if="active == 1">{{ caseData.examples }}</view>
      <view v-if="active == 2">{{ caseData.attainment }}</view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { getSecutorInfoAPI, getInterviewListAPI } from '@/service/index/foo'
import { useUserStore } from '@/store'

import userImg from '../../static/mine/头像.png'
const baseUrl = import.meta.env.VITE_SERVER_BASEURL
const menuList = ['刑事', '民事', '行政', '公益诉讼']
const menuLists = ref([])
const active = ref(0)
const infoList = ['工作成就 ', '接访案例', '接访承诺']
const tab = ref(0)
const UserId = ref()
const activeTime = ref()
const requestTimeList = {
  '9:00 ~ 10:30': 1,
  '10:45 ~ 12:00': 2,
  '14:00 ~ 15:30': 3,
  '15:45 ~ 17:00': 4,
}
const caseData = ref({
  nickname: undefined,
  deptName: undefined,
  introduction: undefined,
  caseType: undefined,
  attainment: undefined,
  examples: undefined,
  promise: undefined,
  avatar: undefined,
})
const dateList = ref([])
function handleSub(id) {
  uni.navigateTo({
    url: `/pages/visit/visitSub?id=${id}`,
  })
}
function handleChange(value) {
  active.value = value.index
}
onLoad((options) => {
  UserId.value = options.id
  activeTime.value = options.time
  getSecutorInfoAPI(UserId.value).then((res) => {
    caseData.value = Object.assign(unref(caseData), res.data)
    menuLists.value = caseData.value.caseType.map((item) => {
      return menuList[item - 1]
    })
  })
  getInterviewListAPI({
    acceptTime: activeTime.value,
    pageNo: 1,
    pageSize: 100,
    acceptUserId: UserId.value,
  }).then((res) => {
    if (res.data && res.data.list.length > 0) {
      const arr = res.data.list.map((item) => {
        return { ...item, sort: requestTimeList[item.requestTime] }
      })

      dateList.value = arr.sort((a, b) => a.sort - b.sort)
    }
  })
})
</script>
<style lang="scss" scoped>
.cardShadow {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.yuYue-item {
  border-bottom: 2rpx solid #f2f2f2;
}

.yuYue-item:last-of-type {
  border: none;
}

.scroll-item-active {
  background: #006eff;

  color: #fff;
}

:deep(.wd-button) {
  margin: 0;
  background: #006eff !important;
  border-radius: 10rpx !important;
}

:deep(.wd-tabs__line) {
  background: #1684fc !important;
}

:deep(.wd-tabs__nav-item.is-active) {
  color: #1684fc;
}

:deep(.wd-tabs__nav-item) {
  flex: none !important;
  padding: 0 !important;
}

:deep(.wd-tabs__nav-item:nth-of-type(2)) {
  padding: 0 80rpx !important;
}

:deep(.wd-button) {
  width: 140rpx !important;
}
</style>
